<template>
<div>
  <div class="getMoney animated fadeInUp" >
    <img class="title" src="../assets/img/gongxi.png">
    <div class="name"><span>姓名</span><input v-model="name"/></div>
    <div class="phone"><span>电话</span><input  v-model="phone"/></div>
    <div class="address"><span>地址</span><input  v-model="address"/></div>
    <div class="tips">
      <div class="tip">仔细填写姓名、电话、地址</div>
      <div class="tip2">奖品将在15个工作日内完成发放</div></div>
    <img @click="ongetLuck" class="getMoney-btn" src="../assets/img/submit.png">
     <div class="tip-text">本页面最终解释权由"谭木匠"所有</div>
     <div class="mask" v-if="showMask"></div>
    <div class="success-model"  v-if="showMask" >
      <div class="v-title">提交成功</div>
      <div class="v-content ">您的信息已提交，奖品将在15个工作日内发出，请您注意查收</div>
      <div class="confirm" @click="cancel">知道了</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Success',
  data () {
    return {
      imgUrl: '',
      showMask: false,
      name: '',
      phone: '',
      address: ''
    }
  },
  mounted () {
  },
  methods: {
    cancel () {
      this.showMask = false
    },
    ongetLuck () {
      // 为空校验
      let namePattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）;—|{}【】‘；：”“'。，、？]")
      if (this.name.length > 10 || this.name.length < 2 || namePattern.test(this.name)) {
        alert('姓名只能是汉字字母或数字且长度不得超过10个并且不得小于2个')
        return
      }
      let phonePattern = /^([0-9]{3,4}-)?[0-9]{7,8}$/
      let telPattern = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/
      if (phonePattern.test(this.phone) || telPattern.test(this.phone)) {
      } else {
        alert('请填写正确的座机号或者手机号,座机号输入为XXXX-XXXXXXXX')
        return
      }
      if (this.address.length == 0) {
        alert('请输入正确的地址')
        return
      }
      let objData = {
        userId: sessionStorage.getItem('userId'),
        realName: this.name,
        phone: this.phone,
        adress: this.address
      }
      this.axios({
        method: 'post',
        url: 'http://211.149.169.49:8080/confession/user/saveAdressinfo.do',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: objData,
        params: objData
      }).then(res => {
        if (res.data.state === 0) {
          this.showMask = true
        }
      })
    }
  }
}
</script>
<style  @scoped lang="less">
    .getMoney{
      text-align: center;
      width: 100%;
      height: 100vh;
      position: relative;
      .mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2);
      }
      .success-model{
        width:  4.8rem;
        height: 4.8rem;
        background: #DA3615;
        position: absolute;
        left: 50%;
        margin-left: -2.5rem;
        top: 50%;
        margin-top: -2.5rem;
        border-radius: .2rem;
        border: .01rem solid #DA3615;
        padding: .2rem;
        color: #FFF;
        .v-title{
          font-size: .5rem;
          margin-bottom: .8rem;
          margin-top: 1rem;
        }
        .v-content{
          font-size: .3rem;
        }
        .confirm{
          background: #FFF;
          padding: .1rem;
          width: 1.4rem;
          border-radius: .1rem;
          margin: 0 auto;
          margin-top: .5rem;
          color: #DA3615;
          font-size: .3rem;
        }
      }
      .title{
        width: 2.9rem;
        height: 1.29rem;
        margin: 0 auto;
        padding-top: 1rem;
        padding-bottom: 1.99rem;
      }
      .name{
        width: 5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .38rem;
        animation-delay: 1s;
        span{
          font-size: .3rem;
          font-weight: bold;
        }
        input{
          width: 3.5rem;
          height: .45rem;
          background: #e6e6e6;
          border-radius: .4rem;
          margin-left: .2rem;
          padding: 0 .2rem;
        }
      }
      .phone{
        width: 5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .38rem;
        animation-delay: 1.2s;
        span{
          font-size: .3rem;
          font-weight: bold;
        }
        input{
          width: 3.5rem;
          height: .45rem;
          background: #e6e6e6;
          border-radius: .4rem;
          margin-left: .2rem;
          padding: 0 .2rem;
        }
      }
      .address{
        width: 5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .38rem;
        animation-delay: 1.3s;
        span{
          font-size: .3rem;
          font-weight: bold;
        }
        input{
          width: 3.5rem;
          height: .45rem;
          background: #e6e6e6;
          border-radius: .4rem;
          margin-left: .2rem;
          padding: 0 .2rem;
        }
      }
      .tips{
        width: 5rem;
        margin-bottom: .38rem;
        margin: 0 auto;
        text-align: right;
        margin-bottom: 1.5rem;
        .tip{
        font-size: .2rem;
        color: #979797;
        animation-delay: 1.5s;
        }
        .tip2{
        font-size: .2rem;
        color: #979797;
        animation-delay: 1.7s;
        }
      }
      .getMoney-btn{
        width: 2.68rem;
        margin: 0 auto;
        height: .84rem;
        animation-delay: 1.9s;
      }
      .tip-text{
        font-size: .2rem;
        color: #999;
        margin-top: .5rem;
        animation-delay: 2.1s;
      }
    }
    </style>
